<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="UTF-8">
		<title>红酒会 - 智能红酒管家</title>
		<link rel="shortcut icon" type="image/x-icon" href="${ctx}/favicon.ico" />
		<link type="text/css" rel="stylesheet" href="${ctx}/static/styles/bootstrap.min.css">
	</head>
<body>
	<c:import url="/header"><c:param name="module">vintry</c:param></c:import>
	<c:import url="/vintry/menu"><c:param name="menu">1</c:param></c:import>
	<c:import url="/talk/right" />
	
	<!--outWrap-->
	<div class="outWrap">
		<div class="spekBoxIn" style="min-height:680px;">

        	<div class="tabbable tabs-right">
				<ul class="nav nav-tabs">
					<li ${tabName=='wine'?'class="active"':''}>
						<a href="#wineTab" data-toggle="tab">红酒信息</a></li>
					<li ${tabName=='vintry'?'class="active"':''}>
						<a href="#vintryTab" data-toggle="tab">藏酒维护</a></li>
				  	<li ${tabName=='log'?'class="active"':''}>
				     	<a href="#logTab" data-toggle="tab">藏酒记录</a></li>
			 	</ul>
			 	
			 	
					<div class="tab-content">
<%-- 红酒信息 --%>
<div class="tab-pane ${tabName=='wine'?'active':''}" id="wineTab">
	<table class="table">
		<tbody>
			<tr>
				<td colspan="2" rowspan="10" style="text-align:center; vertical-align:middle;">
					<c:choose>
						<c:when test="${not empty vintry.wine.picUrl}">
							<img src="${vintry.wine.picUrl}" width="150px" height="150px" />
						</c:when>
						<c:otherwise>
							<img src="${ctx}/static/images/no_pic.jpg" width="150px" height="150px" />
						</c:otherwise>
					</c:choose>
				<td>中文名称：</td>
				<td>${vintry.wine.chName}</td>
			</tr>
			<tr>
				<td>英文名称：</td>
				<td>${vintry.wine.enName}</td>
			</tr>
			<tr>
				<td>条形码：</td>
				<td>${vintry.wine.barcode}</td>
			</tr>
			<tr>
				<td>分类：</td>
				<td>${vintry.wine.type.name}</td>
			</tr>
			<tr>
				<td>国家：</td>
				<td>${vintry.wine.country.name}</td>
			</tr>
			<tr>
				<td>产地：</td>
				<td>${vintry.wine.region}</td>
			</tr>
			<tr>
				<td>年份：</td>
				<td>${vintry.wine.vintage}</td>
			</tr>
			<tr>
				<td>葡萄总类：</td>
				<td>${vintry.wine.variety}</td>
			</tr>
			<tr>
				<td>容量：</td>
				<td>${vintry.wine.capacity}</td>
			</tr>
			<tr>
				<td>等级：</td>
				<td>${vintry.wine.grade}</td>
			</tr>
		</tbody>
	</table>
	<hr/><br/>
	<form id="wineForm" action="${ctx}/vintry/save" method="post" class="form-horizontal">
		<input type="hidden" name="id" value="${vintry.id}" />
		<div class="control-group">
			<label class="control-label" for="price">购买价格</label>
			<div class="controls">
				<div class="input-append">
		 				<input type="text" id="price" name="price" class="input-mini"
		 					value="<fmt:formatNumber value="${vintry.price}" pattern="#0.##"/>" />
		 				<span class="add-on">元</span>
				</div>
				<span id="error_price" class="red"></span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="marketPrice">市场价格</label>
			<div class="controls">
				<div class="input-append">
		 				<input type="text" id="marketPrice" name="marketPrice" class="input-mini"
		 					value="<fmt:formatNumber value="${vintry.marketPrice}" pattern="#0.##"/>" />
		 				<span class="add-on">元</span>
				</div>
				<span id="error_marketPrice" class="red"></span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="drinkingRange">适饮期</label>
			<div class="controls">
				<div class="input-append">
		    		<input type="text" id="drinkingRange" name="drinkingRange" class="input-mini"
		    			value="${vintry.drinkingRange}"/>
		    		<span class="add-on">年</span>
				</div>
				<span id="error_drinkingRange" class="red"></span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="remark">备注：</label>
			<div class="controls">
				<textarea id="remark" name="remark" rows="3" class="input-xlarge">${vintry.remark}</textarea>
				<div id="error_remark" class="red"></div>
			</div>
		</div>
		
		<div class="control-group">
		   	<div class="controls">
		     		<button type="submit" id="btnSave" class="btn btn-info">&nbsp;&nbsp;&nbsp;提　交&nbsp;&nbsp;&nbsp;</button>
		   	</div>
		</div>
	</form>
</div>

<%-- 藏酒信息 --%>
<div class="tab-pane ${tabName=='vintry'?'active':''}" id="vintryTab">
	<form id="vintruForm" action="${ctx}/vintry/log/add" method="post" class="form-horizontal">
		<input type="hidden" name="vintry.id" value="${vintry.id}"/>
		<div class="control-group">
			<label class="control-label">藏酒总数</label>
			<div class="controls">
				<div class="input-append">
					<input type="text" id="total" name="total" readonly="readonly"
						value="${vintry.total==null?0:vintry.total}" style="text-align:right; width:30px;" />
					<span class="add-on">瓶</span>
				</div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="type">操作类型</label>
			<div class="controls">
				<c:choose>
					<c:when test="${vintry.total > 0}">
						<label class="radio inline">
			  				<input type="radio" name="type" value="0" checked="checked" > 入库
						</label>
						<label class="radio inline">
		  					<input type="radio" name="type" value="1" onclick="resetNum();"> 出库
						</label>
					</c:when>
					<c:otherwise>
						<label class="radio inline">
							<input type="radio" name="type" value="0" checked="checked"> 入库
						</label>
					</c:otherwise>
				</c:choose>
				
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="num">操作数量</label>
			<div class="controls">
				<div class="input-prepend input-append">
					<a href="javascript:void(0)" onclick="operatNum('-', 10)" class="btn">
						<i class="icon-backward"></i></a>
					<a href="javascript:void(0)" onclick="operatNum('-', 1)" class="btn">
						<i class="icon-minus"></i></a>
					<input type="text" id="num" name="num" value="1"
						style="text-align:right; width:20px;" readonly="readonly">
					<span class="add-on">瓶</span>
					<a href="javascript:void(0)" onclick="operatNum('+', 1)" class="btn">
						<i class="icon-plus"></i></a>
					<a href="javascript:void(0)" onclick="operatNum('+', 10)" class="btn">
						<i class="icon-forward"></i></a>
				</div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="note">备注</label>
			<div class="controls">
				<textarea rows="5" id="note" name="note" class="input-xlarge"></textarea>
				<span id="error_note" class="red"></span>
			</div>
		</div>
		<div class="control-group">
	    	<div class="controls">
	      		<button type="submit" class="btn btn-info">&nbsp;&nbsp;&nbsp;提　交&nbsp;&nbsp;&nbsp;</button>
	    	</div>
	  	</div>
	</form>
</div>

<%-- 藏酒日志 --%>
<div class="tab-pane ${tabName=='log'?'active':''}" id="logTab">
	<table class="table table-condensed">
		<thead>
			<tr>
				<th>操作时间</th>
				<th>操作类型</th>
				<th>数量</th>
			</tr>
		</thead>
		<c:forEach var="log" items="${vintry.vintryLogs}">
			<tr>
				<td><fmt:formatDate value="${log.editTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
				<td>
					<c:choose>
						<c:when test="${log.type==0}">入库</c:when>
						<c:otherwise>出库</c:otherwise>
					</c:choose>
				</td>
				<td>${log.num}</td>
			</tr>
		</c:forEach>
	</table>
</div>
					</div>
			</div>
		</div>
	</div>
	
	<c:import url="/WEB-INF/views/footer.jsp" />
	
	<script type="text/javascript" src="${ctx}/static/scripts/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/scripts/bootstrap.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/libs/datepicker/js/bootstrap-datepicker.js"></script>
	<script type="text/javascript" src="${ctx}/static/libs/datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#wineForm').validate({
				rules: {
					price: {
						number: true,
						max: 10000000
					},
					marketPrice: {
						number: true,
						max: 10000000
					},
					drinkingRange: {
						required: true,
						digits: true,
						max: 1000
					},
					remark: {
						maxlength: 100
					}
				},
				messages: {
					price: {
						number: '购买价格只能填写数字',
						max: '购买价格不能超过{0}元'
					},
					marketPrice: {
						number: '市场价格只能填写数字',
						max: '市场价格不能超过{0}元'
					},
					drinkingRange: {
						required: '请填写适饮期',
						digits: '适饮期只能填写整数',
						max: '适饮期不能超过{0}年'
					},
					remark: {
						maxlength: '备注不能超过100个字符'
					}
				},
				errorElement: 'em',
				errorPlacement: function(error, element) {
					error.appendTo($("#error_" + element.attr("id")));
				},
				submitHandler: function(form) {
					form.submit();
				}
			});
		});
		
		$('#vintruForm').validate({
			rules: {
				note: {
					maxlength: 100
				}
			},
			messages: {
				note: {
					maxlength: '备注长度不能超过100个字符'	
				}
			},
			errorElement: 'em',
			errorPlacement: function(error, element) {
				error.appendTo($("#error_" + element.attr("id")));
			}
		});
		
		function operatNum(sign, i) {
			var num = Number($('#num').val());
			if('+' == sign) {
				if($('input[name="type"]:checked').val() == 0) {
					num = Math.min(99, num + i);
				}else {
					num = Math.min(99, num + i, Number($('#total').val()));	
				}
			}else {
				num = Math.max(1, num - i);
			}
			$('#num').val(num);
		}
		function resetNum() {
			if(Number($('#num').val()) > Number($('#total').val())) {
				$('#num').val($('#total').val());
			}
		}
	</script>
</body>
</html>